import { Component,ViewChild } from '@angular/core';
import { Router } from '@angular/router';

/**
 * app首页组件
 */
@Component({
  selector: 'app-mobile-home',
  templateUrl: './mobile-home.component.html',
  styleUrls: ['./mobile-home.component.scss']
})
export class MobileHomeComponent {
  showDelete:boolean = false;
  searchText:string = "";

  /**
   * nav区域数据列表
   */
  NavData: any = []

  /**
   * flag为false时显示html页面的class为body部分，为true时隐藏，默认为false
   */
  flag:boolean=false
  /**
   * f为false时显示html页面的class为search-history部分，为true时隐藏，默认为true
   */
  f:boolean=true
  /**
   * 历史记录数据列表
   */
  public historyList:any[]=[]
  /**
   * 搜索框双向绑定的数据
   */
  public keyword:string=''

  /**
   * currentNav默认值为"推荐"
   */
  currentNav: string = "推荐"

  /**
   * 
   * @param nav NavData列表中的每一项数据
   * 将遍历的数据赋值给this.currentNav
   * 
   */
  changeNav(nav: any) {
    this.currentNav = nav
}

/**
 * 页面刷新时初始化数据
 */
ngOnInit(){
  this.NavData=["直播", "推荐", "热门", "动画", "影视", "世界杯", "校园","新征程"]

  // let searchlist:any=this?.get('searchlist')
  // if(searchlist){
  //     console.log(searchlist);
  //     this.historyList=searchlist
      
  //     console.log(this.historyList);
  // }

}

// ngAfterViewInit(): void {

//   let searchlist:any=this.get('searchlist')
//   if(searchlist){
//     this.historyList=searchlist
//   }
// }

// set(key:string,value:any){
//   localStorage.setItem(key,JSON.stringify(value));
// }

/**
 * 
 * 获取持久化数据
 * @param {any} key 持久化数据对象的key值
 * @returns 返回对象key值的对象数据
 */
get(key:string){
  return JSON.parse( (key) || '0')
}
/**
 * 
 * 删除持久化数据
 * @param {any} key 持久化数据对象的key值
 * 根据key值删除对象 
 */
remove(key:any){
  localStorage.removeItem(key)
}

onChange(){
  this.flag=true
  this.f=false  
}

onBack(){
  this.flag=false
  this.f=true
}

// doAdd(ev?:any){
//   if(ev.keyCode==13 && this.keyword !=''){
//     if(this.historyList.indexOf(this.keyword)==-1){
//     this.historyList.push(this.keyword)
//     console.log(this.keyword);
//     console.log(this.historyList);
    
//     this.set('searchlist',this.historyList)
//     // console.log(this.historyList);
//   }
    

//     this.keyword=''
//   }
  

  
// }

// onDel(key:number){
//   console.log(key);
//   // this.remove('searchlist');  //只能删除key
//   this.historyList.splice(key,1)

  
// }
 

/**
 * 获取VideoWork表中数据列表
 */
  VideoList:any[]=[]

/**
 * 
 * @param video 传入一条数据对象
 * 跳转到'/bvideo/mobile-videopage'页面
 * 传入对应对象的objecId字段数据
 */
  goVideoDetail(video:any){
    console.log(video)
    // [routerLink]="['/bvideo/mobile-videopage']"
    this.router.navigate(['/bvideo/mobile-videopage'],{
      queryParams:{
        id: video.objectId
      }
    })
  }

  /**
   * 
   * 轮播图功能
   * 改变对应标签定位的left值
   * @param id 对应数据下标
   */
  Onclick(id:number){
    let ol:any=document.querySelector('.circle')
    let ul:any=document.querySelector('.column')
    let focus:any=document.querySelector('.focus')
    let that = this
    ol?.addEventListener('click',function(){
      for(let i=0;i<ol.children.length;i++){
        ol.children[i].style='list-style-type :circle';       
      }
      ol.children[id-1].style='list-style-type : disc';
      let focusWith:number=focus.offsetWidth+85;  
      that.animate(ul,-(id-1)*focusWith-103,()=>{
        
      })                 
    })
  }

  /**
   * 
   * 动画效果
   * @param obj 对应的标签变量
   * @param target 移动的距离
   * @param callback 回调函数
   */
animate(obj:any,target:number,callback:any) {  
  clearInterval(obj.timer);
  obj.timer=setInterval(function(){
    let step=(target- obj.offsetLeft)/10;
    step=step > 0 ? Math.ceil(step) : Math.floor(step);
    if(obj.offsetLeft==target){
      clearInterval(obj.timer)
      if(callback){
        callback();
      }
    }
    obj.style.left=obj.offsetLeft+step+'px';
  },15)
  
  }
  constructor(private router:Router){
    this.getVideoDataFromFetch();
      
  }

  search(ev?:Event){
    if(ev){
      if((ev as any).code != "Enter") return
    }
    let searchParams =`,"bvId":{"$regex":"${this.searchText}"}`
    this.getVideoDataFromFetch(searchParams)
  }

  /**
   * 获取VideoWork表数据
   * @returns
   * 将数据赋值给this.VideoList
   */
 async getVideoDataFromFetch(searchParams=''){
  let url="http://metapunk.cn:9999/parse/classes/VideoWork?"

  let paramsWhere
  if(!this.showDelete){
    paramsWhere=`where={"isDeleted":false${searchParams}}`
    url+=paramsWhere
  }
  else{
    paramsWhere=`where={"isDeleted":true${searchParams}}`
    url+=paramsWhere
  }
  url+='&include=user'
  let response = await fetch(url, {
    "credentials": "omit",
    "headers": {
        "X-Parse-Application-Id": "dev",
    },
    "method": "GET",
    "mode": "cors"
})

  let data = await response.json()
  this.VideoList = data.results;
  console.log(this.VideoList);
  
}
}


 









  
 
 
